<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
		<link rel="shortcut icon" href="__PUBLIC__/images/favicon.ico"/>
<!-- <div style="width:800px;margin:0 auto; display: table-cell;
vertical-align: middle;
font-weight:bold;  /*display: -webkit-box;-webkit-box-align: center;*/
    /*-webkit-box-pack: center;*/">


</div> -->

<style>
a{
	text-decoration: none;
}
.container{
width: 800px;
height: 600px;
margin:0 auto;
display: table;
overflow:auto;
position: relative;
}
.cell{
display: table-cell;
vertical-align: middle;
overflow:auto;
/*border: 1px solid #eee*/

}
.content{
overflow:auto;
padding:60px;
padding-top: 80px;
border: 1px solid #eee;
postition:relative;
}
.info_row input{
	border: 1px solid #ccc;
    width: 336px;
    height: 14px;
    line-height: 14px;
    padding: 12px 40px 12px 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.06);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.06);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.06);
    box-sizing:content-box
}
.info_row_name{
	width:20%;
	display: inline-block;
	text-align: right;
	font-size: 14px;
}
.info_row_value{
	width:80%;
}
.mtop-12{
	margin-top:12px;
}
.btn_reg{
	cursor: pointer;
	background:#ff4001;
	color:#fff;
	font-size: 16px;
	font-weight: 700;
	width:100px;
	height:40px;
	margin: 60px 250px;
	border:none;
    border-radius: 3px
}
.back{
	position: absolute;
	top:40px;
	right: 20px;
}
.back input{
	color:#fff;
	border-width: 0px;
	font-size: 14px;
	height: 36px;
	line-height: 36px;
	width:60px;
	border-radius: 5px;
	background: #ccc;
}
.info_row_img{
	height:40px;
	margin:0;
	padding:0;
	vertical-align: middle;
	width:18%;
	margin-left: 10px;
	float:left;
}
.row_name_img{
	float:left;
	height:40px;
	line-height: 40px;
}
.code{
	float: left;
	margin-left:8px;
}
label.error {
    vertical-align: middle;
    font-size: 13px;
    text-align: left;
    margin-left: 5px;
    padding-left: 20px;
    margin-bottom: 0px;
    color: red;
    background: url('__PUBLIC__/home/img/error.png') no-repeat left center;
    display: inline-block;
    padding-top: 2px;
    height: 40px;
    line-height: 40px;
}



</style>
</head>
<body >
<div class="container">
	<div class="cell">
		<form class="content" id="regForm">
			<div class="info_row mtop-12">
				<label for="" class="info_row_name">用户昵称</label>
				<input class="info_row_value" name="username" id="username" placeholder="请输入用户昵称" type="text">
			</div>
			<div class="info_row mtop-12">
				<label for="" class="info_row_name">邮箱</label>
				<input class="info_row_value" name="email" id="email"  placeholder="请输入正确格式的邮箱" type="text">
			</div>
			<div class="info_row mtop-12">
				<label for="" class="info_row_name">密码</label>
				<input  class="info_row_value" name="password" id="password"  placeholder="请输入密码" type="password">
			</div>
			<div class="info_row mtop-12">
				<label for="" class="info_row_name">密码</label>
				<input  class="info_row_value" name="re_password" id="re_password"  placeholder="请确认密码" type="password">
			</div>
			<div class="info_row mtop-12">
				<label for="" class="info_row_name">真实姓名</label>
				<input  class="info_row_value" name="realname" id="realname" placeholder="请输入真实姓名" type="text">
			</div>
			<div class="info_row mtop-12">
				<label for="" class="info_row_name row_name_img">验证码</label>
				<input type="text"  id="code" name="code" class="code" placeholder="请输入验证码" style="display: inline-block;width:30%">
				<img id="getcode_math" class="info_row_img" src="{:u('Public/get_verification_code')}" title="看不清，点击换一张" style="cursor:pointer;display: inline-block;"  onerror="" alt="..." />
			</div>
			<button class="btn_reg" id="registerBtn"> 确认注册 </button>

		</form>
	</div>
	<div class="back">
		<a  href="javascript:history.back(-1);">×</a>
		<!-- <input type="button" onclick="javascript:history.back(-1);" value="返回"> -->
	</div>
</div>
<script src="__PUBLIC__/3rd/jquery/jquery.min.js"></script>
<script src="__PUBLIC__/3rd/jquery/jquery.validate.min.js"></script>
<script src="__PUBLIC__/3rd/jquery/messages_zh.js"></script>
<script src="__PUBLIC__/home/js/app.js"></script>


<script>

	$(function(){
		var Think = {
		    "APP": '__APP__',
		    "URL": '__URL__',
		    "ROOT": '__ROOT__',
		    "PUBLIC": '__PUBLIC__'
		};
		var postUrl= Think.APP+'/Public/check_user_is_existence';
        var dataInfo = {username:function(){ return $("#username").val()}};
		var code = {code:function(){ return $("#code").val()}};
		var remoteInfo = GetRemoteInfo(postUrl, dataInfo);
		var remoteCode = GetRemoteInfo(Think.APP+"/Public/check_code", code);
		var validateOptions = {
                rules: {
                    username:{
                        required: true,
                        remote:remoteInfo
                    },
                    email:{
            			required:true,
            			email:true
            		},
                    password:{
                    	required:true,
                    	maxlength:16,
                    	minlength:5
                    },
                    re_password: {
                        required: true,
                        equalTo:"#password"
                    },
                    code:{
                    	required:true,
                    	remote:remoteCode
                    }
                },
                messages: {
                    username:{
                    	required:"请输入用户昵称",
                    	remote:"用户名已存在"
                    },
                    email:{
                    	required:"请输入正确格式的邮箱",
                    	email:"请输入正确格式的邮箱"
                    },
                    password:{
                    	required:"请输入密码",
                    	maxlength:"请输入16个以内的字符",
                    	minlength:"请输入5个以上的字符"
                    },
                    re_password:{
                    	required:"请确认密码",
                    	equalTo:"两次密码输入不一致"
                    },
                    code:{
                    	required:"请输入验证码",
                    	remote:"验证码错误"
                    }
                },
            };
        var validator = $("#regForm").validate(validateOptions);

		$("#getcode_math").click(function(){
		    $(this).attr("src","{:u('Public/get_verification_code')}?" + Math.random());
		 });
		$("#registerBtn").on("click" , function(){
			if(validator.form()){
				var regForm = $("#regForm");
				var json = $.fn.serializeJson(regForm);
				var jsonStr = JSON.stringify(json);
				$.ajax({
					url:Think.APP+"/Public/check_register",
					type:"post",
					dataType:"json",
					data:json,
					success:function(data){
						window.location.href =Think.APP+"/index/index.html";
					},
					error:function(){
						alert(" service closed")
					}
				})
			}
		});
	})
</script>

</body>
</html>
